<template>
	<view class="_btnInfo">
		<view :class="item.id == cur?'activeItem':'initItem'" v-for="(item,index) in tabList" :key="index"
			:style="{padding:`6rpx ${paddingStyle}rpx`}" @tap.stop='changeTab(item.id)'>
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabList: {
				type: Array,
				default: () => {
					return [];
				},
			},
			// 内边距
			paddingStyle: {
				type: [String, Number],
				default: 20,
			},
		},
		data() {
			return {
				cur: 1
			};
		},

		watch: {
			tabList: {
				handler(v) {
					this.cur = v.length > 0 ? v[0].id : ''
				},
				deep: true
			},
		},
		methods: {
			changeIndex() {
				this.cur = this.tabList.length > 0 ? this.tabList[0].id : ''
			},
			changeTab(e) {
				this.cur = e
				this.$emit("cur", this.cur);
			}
		}
	}
</script>

<style lang="scss" scoped>
	._btnInfo {
		display: flex;
		font-size: 28rpx;
		flex-wrap: wrap;

		.activeItem {
			background: #819AD3;
			color: 28rpx;
			color: #fff;
			margin: 10rpx;
			border-radius: 8rpx;
		}

		.initItem {
			background: #F4F4F4;
			color: #909090;
			color: 28rpx;
			margin: 10rpx;
			border-radius: 8rpx;
		}
	}
</style>
